<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>小K服务后台管理系统--IP地址管理</title>
		<meta name="keywords" content="">
		<meta name="description" content="">

		<link rel="shortcut icon" href="../../../../static/favicon.ico" th:href="@{/favicon.ico}">
		
		<link rel="stylesheet" type="text/css" href="../../../../static/bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/plugins/sweetalert/sweetalert.css" th:href="@{/plugins/sweetalert/sweetalert.css}" />
        <link rel="stylesheet" type="text/css" href="../../../../static/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" th:href="@{/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css}" />
        <link rel="stylesheet" type="text/css" href="../../../../static/plugins/layui/css/layui.css" th:href="@{/plugins/layui/css/layui.css}" />
        <link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/font-awesome.css" th:href="@{/web/admin/css/font-awesome.css}" />
        <link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/animate.css" th:href="@{/web/admin/css/animate.css}" />
        <link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/style.css" th:href="@{/web/admin/css/style.css}" />
        <style type="text/css">
			table td,
			table th {
				text-align: center;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight" id="body">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>IP列表 <small>内网IP信息管理</small></h5>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="col-sm-5 m-b-xs">

									<div class="btn-group" id="exampleToolbar" role="group">
										<button type="button" class="btn btn-outline btn-default" v-on:click="add">
                                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                    </button>
										<button type="button" class="btn btn-outline btn-default" v-on:click="del(undefined)">
                                        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                                    </button>
									</div>

								</div>
								<div class="col-sm-4 m-b-xs">
								</div>
								<div class="col-sm-3">
									<div class="input-group">
										<input type="text" placeholder="请输入关键词" class="input-sm form-control" v-model.trim="pageInfo.search"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary" v-on:click="search"> 搜索</button> </span>
									</div>
								</div>
							</div>
							<div>
								<table class="table table-hover table-bordered">
									<thead>
										<tr>
											<th style="width: 50px;">
												<input type="checkbox" class="i-checks" v-on:click="select" v-model="selectAll">
											</th>
											<th>地理位置</th>
											<th>IP段</th>
											<th>网关</th>
											<!--<th>DNS服务器</th>-->
											<th style="width: 150px;">操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(item, index) in list">
											<td>
												<input type="checkbox" v-bind:value="item.id" v-model="item.select" class="i-checks"/>
											</td>
											<td>{{item.building}}-{{item.room}}</td>
											<td>{{item.ip1}}-{{item.ip2}}</td>
											<td>{{item.gw}}</td>
											<!--<td>{{item.dns1}}/{{item.dns2}}</td>-->
											<td>
												<div class="btn-group">
													<button data-toggle="dropdown" class="btn btn-white dropdown-toggle">操作 <span class="caret"></span>
													</button>
													<ul class="dropdown-menu">
														<li>
															<a href="javascript:void(0);" v-on:click="showInfo(item)" class="font-bold">查看具体信息</a>
														</li>
														<li>
															<a href="javascript:void(0);" v-on:click="update(item)" class="font-bold">修改IP信息</a>
														</li>
														<li>
															<a href="javascript:void(0);" v-on:click="del(item)" class="font-bold">删除IP信息</a>
														</li>
													</ul>
												</div>
											</td>
										</tr>
                                        <tr v-if="!list || list.length == 0" style="text-align: center;"><td colspan="5">没有更多内容</td></tr>
									</tbody>
								</table>
							</div>
							<div id="page"></div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div id="winLayer" style="display: none;margin: 0;padding:0 20px;">
			<form class="form-horizontal m-t">
				<input type="hidden" v-model="ip.id" value="0" />
				<div class="form-group">
					<label class="col-sm-3 control-label">房间号</label>
					<div class="col-sm-4">
						<select class="form-control m-b" v-model="ip.building">
							<option v-for="(item, index) in buildings" v-bind:value="item.value" v-bind:selected="ip.building==item.value">{{item.text}}</option>
						</select>
					</div>
					<div class="col-sm-4">
						<input v-model="ip.room" minlength="2" type="text" class="form-control" placeholder="房间号" required="" aria-required="true">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">IP始地址</label>
					<div class="col-sm-8">
						<input v-model="ip.ip1" type="text" class="form-control" required="" placeholder="IP始地址" aria-required="true">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">IP终地址</label>
					<div class="col-sm-8">
						<input v-model="ip.ip2" type="text" class="form-control" required="" placeholder="IP终地址" aria-required="true">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">网关</label>
					<div class="col-sm-8">
						<input v-model="ip.gw" type="text" class="form-control" required="" placeholder="网关" aria-required="true">
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label">子网掩码</label>
					<div class="col-sm-8">
						<input v-model="ip.mask" type="text" class="form-control" required="" placeholder="子网掩码" aria-required="true">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">DNS1</label>
					<div class="col-sm-8">
						<input v-model="ip.dns1" type="text" class="form-control" required="" placeholder="DNS1" aria-required="true">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">DNS2</label>
					<div class="col-sm-8">
						<input v-model="ip.dns2" type="text" class="form-control" required="" placeholder="DNS2" aria-required="true">
					</div>
				</div>
			</form>
		</div>

		<div id="info" style="display: none;margin: 0;padding:0 20px;">
			<table class="table">
				<thead>
					<tr>
						<th>项目</th>
						<th>数据</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>数据ID</td>
						<td>{{ip.id}}</td>
					</tr>
					<tr>
						<td>建筑</td>
						<td>{{ip.building | DValue}}</td>
					</tr>
					<tr>
						<td>房间号</td>
						<td>{{ip.room | DValue}}</td>
					</tr>
					<tr>
						<td>始地址</td>
						<td>{{ip.ip1 | DValue}}</td>
					</tr>
					<tr>
						<td>终地址</td>
						<td>{{ip.ip2 | DValue}}</td>
					</tr>
					<tr>
						<td>网关</td>
						<td>{{ip.gw | DValue}}</td>
					</tr>
					<tr>
						<td>子网掩码</td>
						<td>{{ip.mask | DValue}}</td>
					</tr>
					<tr>
						<td>DNS1</td>
						<td>{{ip.dns1 | DValue}}</td>
					</tr>
					<tr>
						<td>DNS2</td>
						<td>{{ip.dns2 | DValue}}</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="../../../../static/plugins/jquery.min.js" th:src="@{/plugins/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/plugins/sweetalert/sweetalert.min.js" th:src="@{/plugins/sweetalert/sweetalert.min.js}" type="text/javascript" charset="utf-8"></script>
        <script src="../../../../static/web/admin/js/content.js" th:src="@{/web/admin/js/content.js}" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

            layui.use(['layer', 'laypage', 'laydate'], function(){
                var layer = layui.layer //获得layer模块
                    ,laypage = layui.laypage //获得laypage模块
                    ,laydate = layui.laydate; //获得laydate模块
                //使用模块

                var info = new Vue({
                    el:"#info",
                    data:{
                        ip:{}
                    },
                    methods:{
                        showInfo:function (item) {
                            this.ip = item;
                            layui.layer.open({
                                title: "详细信息",
                                type: 1,
                                area: ['400px', '420px'],
                                content: $("#info"),
                                shadeClose: true
                            });
                        }
                    },
                    filters: {
                        /**
                         * @return {string}
                         */
                        DValue: function(dateValue) {
                            if(dateValue === undefined || dateValue === "") {
                                return "<空>";
                            }
                            return dateValue;
                        }
                    }
                });
                var app = new Vue({
                    el:"#body",
                    data:{
                        selectAll:false,
                        list:[],
                        pageInfo:{
                            page:1,
                            search:""
                        }
                    },
                    methods:{
                        select: function() {
                            for(var i = 0; i < this.list.length; i++) {
                                this.list[i].select = this.selectAll
                            }
                        },
                        search:function () {
                            this.loadPage(1);
                        },
                        add:function () {
                            win.add();
                        },
                        showInfo:function (item) {
                            info.showInfo(item);
                        },
                        update:function (item) {
                            win.update(item);
                        },
                        del:function(item) {
                            console.log(item);
                            var data = {id:[],_method:"DELETE"};
                            var names = [];
                            if(item === undefined){
                                for(var i in this.list) {
                                    var item1 = this.list[i];
                                    if(item1.select) {
                                        data.id.push(item1.id);
                                        names.push(item1.building+item1.room);
                                    }
                                }
                            }else {
                                data.id.push(item.id);
                                names.push(item.building+item.room);
                            }
                            if(names.length === 0){swal("提示", "没有选择要删除的IP地址信息。");return false;}

                            swal({
                                    title: "您确定要删除选中的信息吗？",
                                    text: "数据被删除后将无法恢复，请谨慎操作！",
                                    type: "warning",
                                    showCancelButton: true,
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: "是的，我要删除！",
                                    cancelButtonText: "让我再考虑一下…",
                                    closeOnConfirm: false,
                                    closeOnCancel: true
                                },
                                function(isConfirm) {
                                    if(isConfirm) {
                                        $.ajax({
                                            type: "post",
                                            data: data,
                                            url: "",
                                            async: true,
                                            dataType: "json",
                                            success: function(data) {
                                                if(data.code === 0){
                                                    swal("删除成功！", "您已经删除了该信息。", "success");
                                                    app.loadPage(1);
                                                }else{
                                                    swal("删除失败", "删除信息遇到错误，原因：" + data.msg + "。", "error");
                                                    app.loadPage(1);
                                                }
                                            },
                                            error: function() {
                                                swal("错误", "数据加载错误！", "error");
                                            }
                                        });
                                    } else {
                                        //swal("已取消", "您取消了清空操作！", "error");
                                    }
                                });
                        },
                        loadPage:function (page) {
                            if(page === undefined) {
                                // 重新加载当前页面
                            }else if(page * 1 < 1) {
                                this.pageInfo.page=1;
                            }else {
                                this.pageInfo.page=page;
                            }
                            $.ajax({
                                type: "get",
                                data:app.pageInfo,
                                url: "",
                                async: true,
                                dataType: "json",
                                success: function(data) {
                                    if (data.code === 0) {
                                        layui.layer.msg(data.msg);
                                        app.list = data.list;
                                        layui.laypage.render({
                                            elem: "page",
                                            count:data.count,
                                            limit:10,
                                            curr: data.pageCurr,
                                            groups: 10,
                                            jump: function(obj, first) {
                                                //得到了当前页，用于向服务端请求对应数据
                                                var curr = obj.curr;
                                                if(!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                                    app.loadPage(curr);
                                                }
                                            }
                                        });
                                    }else{
                                        layui.layer.msg(data.msg, {time: 20000, btn: ['明白了']});
                                    }
                                },
                                error:function () {
                                    layui.layer.msg("加载错误", {time: 5000, btn: ['明白了']});
                                }
                            });
                        }
                    }
                });
                app.loadPage(1);

                var win = new Vue({
                    el:"#winLayer",
                    data:{
                        ip:{},
                        buildings: [
                            {
                                value: "1",
                                text: "一栋"
                            },
                            {
                                value: "2",
                                text: "二栋"
                            },
                            {
                                value: "3",
                                text: "三栋"
                            },
                            {
                                value: "4",
                                text: "四栋"
                            },
                            {
                                value: "5",
                                text: "五栋"
                            },
                            {
                                value: "6",
                                text: "六栋"
                            },
                            {
                                value: "7",
                                text: "七栋"
                            },
                            {
                                value: "8",
                                text: "八栋"
                            },
                            {
                                value: "9",
                                text: "九栋"
                            },
                            {
                                value: "10",
                                text: "十栋"
                            }
                        ]
                    },
                    methods:{
                        update:function (item) {
                            this.ip = item;
                            layui.layer.open({
                                title: "修改IP信息",
                                type: 1,
                                area: ['400px', '500px'],
                                content: $("#winLayer"),
                                btn: ["确定修改", "取消修改"],
                                yes: function(index, layero) {
                                    layui.layer.close(index);
                                    win.ip._method="PUT";
                                    $.ajax({
                                        type: "post",
                                        data: win.ip,
                                        url: "",
                                        async: true,
                                        dataType: "json",
                                        success: function(data) {
                                            if(data.code === 0){
                                                app.loadPage(1);
                                            }else{
                                                layui.layer.msg(data.msg, {time: 20000,btn: ['明白了']},function(){app.loadPage(1);});
                                            }
                                        },
                                        error: function() {
                                            layui.layer.msg("加载错误");
                                        }
                                    });
                                }
                            });
                        },
                        add:function () {
                            this.ip={};
                            layui.layer.open({
                                title: "添加IP信息",
                                type: 1,
                                area: ['400px', '500px'],
                                content: $("#winLayer"),
                                btn: ["确定添加", "取消添加"],
                                yes: function(index, layero) {
                                    layui.layer.close(index);
                                    $.ajax({
                                        type: "post",
                                        data: win.ip,
                                        url: "",
                                        async: true,
                                        dataType: "json",
                                        success: function(data) {
                                            if(data.code === 0){
                                                app.loadPage(1);
                                            }else{
                                                layui.layer.msg(data.msg, {time: 20000,btn: ['明白了']},function(){app.loadPage(1);});
                                            }
                                        },
                                        error: function() {
                                            layui.layer.msg("加载错误");
                                        }
                                    });
                                }
                            });
                        }
                    }
                });


                $('#search').on('keypress', function(event) {
                    if(event.keyCode === 13) {
                        $("#searchSubmit").click();
                    }
                });
            });

		</script>

	</body>

</html>